<template>
  <div class="header">
    <!-- 左边 -->
    <div class="header-left">
      <i class="el-icon-upload , icon" style="margin-right: 10px;"></i>
      <h1 class="header-title">cloud-storage</h1>
      <i class="el-icon-s-fold , icon" v-if="$store.state.isCollapse" @click="isCollapse"></i>
      <i class="el-icon-s-unfold , icon" v-else @click="isCollapse"></i>
      <h1 class="header-title" style="margin-left: 20px;">{{user.role==0?'管理后台':'客户端'}}</h1>
    </div>
    <!-- 右边 -->
    <div class="header-right">
      <div>
        <el-dropdown>
          <span class="el-dropdown-link" style="font-weight:bold;">
            {{user.role==0?'欢迎！管理员：':'欢迎！用户：'}}{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="updateInfo">修改个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 修改个人信息弹窗 -->
    <!-- <el-dialog title="修改个人信息" :visible.sync="dialog" width="30%">
      
    </el-dialog> -->

    <el-drawer title="修改个人信息" :visible.sync="dialog" direction="rtl">
      <el-form status-icon ref="userInfo" label-width="100px" class="update-userInfo">
        <el-form-item label="用户名：">
          <el-input v-model="userName"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" show-password v-model="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="email"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="gender" label="0">男</el-radio>
          <el-radio v-model="gender" label="1">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="doUpdate">提 交</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>
  </div>
</template>

<script>
  import router from "@/router";
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  export default {
    name: "Header",
    data () {
      return {
        name: '',
        dialog: false,
        userInfo: {},
        userName: '',
        password: '',
        phone: '',
        gender: '',
        email: '',
        user: {},

      }
    },
    methods: {
      //初始化
      init () {
        this.user = JSON.parse(localStorage.getItem("user"));
        this.name = this.user.userName;
      },
      //侧边栏伸缩
      isCollapse () {
        this.$store.commit("collapseMenu");
      },
      //退出登录
      logout () {
        localStorage.clear();
        router.push("/");
      },
      //修改个人信息
      updateInfo () {
        this.userName = this.user.userName
        this.phone = this.user.phone
        this.gender = this.user.gender + ''
        this.email = this.user.email
        this.dialog = true
      },
      //执行修改
      doUpdate () {
        let data = {
          userName: this.userName,
          password: this.password,
          phone: this.phone,
          gender: this.gender,
          email: this.email,
        }

        link(apiUrl.baseUrl + '/sys/user/update/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.user = ok.data.data.userVO
            localStorage.setItem("token", ok.data.data.token);
            localStorage.setItem("user", JSON.stringify(ok.data.data.userVO));
            this.dialog = false
          } else {
            this.$message.error(ok.data.msg);
          }
        })
      }
    },
    mounted () {
      this.init()
    },
  };
</script>

<style scoped>
  .header {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .header-left {
    height: 100%;
    line-height: 60px;
    display: flex;
    justify-content: space-around;
    align-content: center;
  }

  .header-title {
    margin: 0;
    margin-right: 20px;
  }

  .header-right {
    height: 100%;
    line-height: 60px;
  }

  .icon {
    height: 100%;
    font-size: 24px;
    line-height: 60px;
    /* margin-left: 20px; */
    cursor: pointer;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #0a0a0a;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .update-userInfo {
    text-align: left;
  }
</style>